<template>
    <div class="content">
       <el-dialog
            title="回复评论"
            :visible.sync="visible.isShow"
            size="tiny">
            <el-form ref="canelLesson" :model="formInline" label-width="80px" :rules="rules">
                 <el-row :gutter="20">
                    <el-col> 
                        <el-form-item label="评论内容" class="reply-comment-content">
                                <span class="comment-content">{{visible.info.sCommentContent}}</span>  
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col> 
                        <el-form-item label="回复内容" prop="replyContent">
                            <el-popover placement="top-start" trigger="focus" content="字符长度不大于300个字" ref="popover1"></el-popover>
                             <el-input type="textarea" v-popover:popover1 :autosize="{ minRows: 4, maxRows: 10}" v-model="formInline.replyContent" placeholder="请填写回复内容，300字内" :maxlength="300" resize="none"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex" class="btn-group" justify="center" >
                    <el-col :span="4">
                        <el-button @click="cancel">取 消</el-button>
                    </el-col>
                     <el-col :span="4">
                        <el-button type="primary" @click="submit('canelLesson')">确 定</el-button>
                    </el-col>
                </el-row> 
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { setReplyByPid } from 'api/onlineLesson';
export default {
    props: {
        visible: {
            type: Object,
            default() {
                return {
                    isShow: false, // 默认不显示    
                    info: {}
                }
            }
        }
    },
    data() {
        return {
            formInline: {
                replyContent: '' // 回复的内容
            },
            rules: {
                replyContent: [
                    { required: true, message: '请输入回复内容', trigger: 'blur' },
                    { pattern: /^[^\s]+$/, message: '请不要输入空格！', trigger: 'blur' }
                ]
            }         
        };
    },
    // watch: {
    //     // 监控父组件传来的info对象
    //     ['visible.info'](val) {
    //         //console.log('val', val, val.sReplyContent);
    //         this.formInline.replyContent = val.sReplyContent;
    //     },
    //     ['visible.isShow'](val) {
    //         if (!val) this.reset();     
    //     }
    // },
    created() {
        if (this.visible.info) {
            this.formInline.replyContent = this.visible.info.sReplyContent;
        }
        //console.log('this.visible.info', this.visible.info)
    },
    methods: {
        // 提交
        submit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$confirm('是否确定回复评论?', ' ', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消'
                    })
                    .then(() => {
                        setReplyByPid(this.visible.info.pId, this.formInline.replyContent).then(response => {
                            if (response.data.status == 200) {
                                this.$message({
                                    type: 'success',
                                    message: response.data.errorMsg
                                });
                                // 关闭
                                this.closeDialog();     
                            }                  
                        });
                    })
                    .catch(e => {
                        this.cancel();
                    });   
                } else {
                    // //console.log('error submit!!');
                    return false;
                }
            });
        },

         // 重置弹框
        reset() {
            this.$refs['canelLesson'].resetFields();
        },

        // 取消
        cancel() {
            // //console.log('111', this.formInline.replyContent);
            this.formInline.replyContent = '';        
            this.visible.isShow = false;
        },

        
        // 关闭弹框
        closeDialog() {   
            // //console.log('2222', this.formInline.replyContent);
            this.visible.isShow = false; 
            this.formInline.replyContent = '';   
            // 更新数据1
            this.$emit('update-list');
        }
    }
}
</script>

<style lang="scss" scoped>
.btn-group{
    padding-top: 10px;
}
.comment-content{
    line-height:24px;
    color:#999;
}

</style>
